{extend name="base" /}
{block name="title"}
<title>留言板</title>
{/block}

{block name="style"}
<link rel="stylesheet" href="__CSS__/message.css">
{/block}

{block name="body"}
<div class="app">
    <!-- cover1 -->
    <div class="cover1">
        <div class="c_content1">
            <div class="c_del1"></div>
            <div class="c_cont1_main">
                <img class="c_con1_title" src="__IMG__/con1_title.png"/>
                <div class="c_con1_box">
                    <img class="c_con_b_pic" src="__IMG__/gzh_code.jpg"/>
                    <div class="c_con_b_font">
                        <div class="c_con_b_f_title">王者荣耀</div>
                        <div class="c_con_b_f_title2">微信搜索公众号：</div>
                        <div class="c_con_b_f_title3">heromoba</div>
                        <div class="c_con_b_f_title4">
                            <img src="__IMG__/circle_arrow.png"/>
                            <span>扫描立刻关注</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- cover2 -->
    <div class="cover2">
        <div class="c_content2">
            <div class="c_del2"></div>
            <div class="c_cont2_main">
                <img class="c_con2_title" src="__IMG__/con2_title.png"/>
                <div class="c_con2_tab">
                    <div class="c_con_t_t1">
                        <ul class="phonetab">
                            <li class="con_tab_active">Android</li>
                            <li>ios</li>
                        </ul>
                        <input class="c_con_input1" value="" type="text" placeholder="请输入您的手机号"/>
                        <div class="con2_yan">
                            <input class="c_con_input2" value="" type="text" placeholder="请输入您的验证码"/>
                            <input class="c_con_input3" type="submit" value="获取验证码"/>
                        </div>
                    </div>
                </div>
                <img class="con2_btn" src="__IMG__/con2_btn.png"/>
                <div class="con2_list">
                    <ul>
                        <li><img src="__IMG__/conlist1.png"/><br>铭文寻宝卷</li>
                        <li><img src="__IMG__/conlist2.png"/><br>御灵水晶</li>
                        <li><img src="__IMG__/conlist3.png"/><br>银鼠坐骑</li>
                        <li><img src="__IMG__/conlist4.png"/><br>高级美酒</li>
                        <li><img src="__IMG__/conlist5.png"/><br>御灵水晶</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- cover3 -->
    <div class="cover3">
        <div class="c_content3">
            <div class="c_del3"></div>
            <img class="c_con3_title" src="__IMG__/con3_title.png">
            <div class="c_con3_font1">
                恭喜您预约成功，测试开始后我们将第一时间通过短信通<br/>知您，并发送预约礼包兑换码，敬请期待!
            </div>
            <div class="c_con3_font2">
                <span>关注微信公众号获取更多礼包信息:</span>
                <img src="__IMG__/gzh_code.jpg"/>
            </div>
        </div>
    </div>
    <!-- 客服 -->
    <div class="right_box">
        <div class="right_btn">
            <div class="right_font">展开</div>
            <div class="left_arrow">
                <img src="__IMG__/leftarrow.png"/>
            </div>
        </div>
        <div class="right_con">
            <div class="right_line1"></div>
            <div class="right_line2"></div>
            <img class="rightbtn_ewm" src="__IMG__/wx.png">
            <span>扫一扫添加我的微信</span>
            <div class="right_qq">
                <a href="https://jq.qq.com/?_wv=1027&k=5XbrZuQ" target="_blank"><img src="__IMG__/rqq.png"/></a>&nbsp;我的QQ
            </div>
            <div class="r_qq_hao">2404387225</div>
            <div class="right_phone">
                <img src="__IMG__/rphone.png"/>&nbsp;客服热线&nbsp;
            </div>
            <div class="r_qq_hao">2404387225</div>
        </div>
    </div>
    <!-- Nav -->
    {include file='common/header' /}


    <div class="message-container">
        <div class="message-main">
            <div class="message-personal">

            </div>

            <div class="message-box">

                <div class="message-list">

                    {volist name='list' id='vo'}

                    <div class="message-item">
                        <div class="message-item-left">
                            <div class="message-avatar-container">
                                <img src="__IMG__/avatar.jpg"/>
                            </div>

                            <p style="text-align: center">
                                {$vo['user']['username']}
                            </p>

                        </div>

                        <div class="message-item-right">

                            <div class="message-content">

                                {if condition="$vo['pid_name'] != '' "}
                                    回复：{$vo['pid_name']}
                                {/if}

                                {$vo['content']}
                            </div>

                            <div class="message-content-footer">

                                <div>
                                    {$vo['create_time']}
                                </div>
                                <div>
                                    <a class="reply" data-id="{$vo['id']}" data-name="{$vo['user']['username']}" href="javascript:;">回复</a>
                                </div>
                            </div>

                        </div>

                    </div>
                    {/volist}








                </div>

                <div>
                    <?php echo $list->render() ?>
                </div>


                <div class="input-main">
                    <div>
                        <span id="replyName"></span>
                        <a id="replyCancel" href="javascript:;"></a>
                    </div>
                    <div class="input-text">
                        <textarea id="messageVal"></textarea>
                        <input type="hidden" id="pid" value="0">
                    </div>

                    <div>
                        <button class="send-btn" id="sendBtn">发送</button>
                    </div>


                </div>
            </div>

        </div>

        
    </div>
    <!-- footer -->
    {include file='common/footer' /}
</div>

</div>


{/block}

{block name="script"}
<script>
    $(function () {
        $('.reply').on('click',function () {
            let id = $(this).attr('data-id')
            let name = $(this).attr('data-name')



            $('#pid').val(id)

            $('#replyName').text('回复：'+name)

            $('#replyCancel').text('取消')



        })

        $('#replyCancel').on('click',function () {
            $('#replyName').text('')
            $('#replyCancel').text('')
            $('#pid').val(0)
        })



        $('#sendBtn').on('click',function () {
            let value = $('#messageVal').val()


            let pid = $('#pid').val()
            //console.log(sid)

            //if(localStorage.getItem("username") != null){
                let id = localStorage.getItem("user_id")
            //}

            $.ajax({
                url:'/index/message/submit',
                data:{value,pid,id:id},
                type:'POST',
                dataType:'JSON',
                success:function () {
                    $('#messageVal').val('')
                    $('#pid').val(0)
                    alert('提交成功')
                    location.reload()
                },
                error:function (error) {


                    alert(error.responseJSON)
                    location.href = '/index/user/login'
                }
            })



        })
    })

</script>
{/block}